<template>

  <el-col :span="5" style="margin-top:8px;margin-left: 10px" class="right_bar">
    <div class="right_bar_item">
      <div class="right_bar_item_title">
        <h3>热门文章</h3>
      </div>
      <p v-for="h in hotArticleList"><el-link type="success"  @click="showDetail(h.id,h.user.id)" class="right_links">{{h.title}}</el-link></p>
    </div>
    <div class="right_bar_item">
      <div class="right_bar_item_title">
        <h3>最新文章</h3>
      </div>
      <p v-for="n in newArticleList"><el-link type="success" @click="showDetail(n.id,n.user.id)" class="right_links">{{n.title}}</el-link></p>


    </div>
    <div class="right_bar_item" style="text-align: left">
      <div class="right_bar_item_title">
        <h3>最火标签</h3>
      </div>
      <div class="right_tags">
        <el-tag v-for="tag in hotTagList" style="margin:10px 30px">{{tag.name}}</el-tag>
      </div>


    </div>
  </el-col>

</template>

<script>
export default {
  name: "RightBar",
  data(){
    return {
      hotArticleList:[],
      newArticleList:[],
      hotTagList:[],
    }
  },
  methods:{
    getHotArticles(){
      let url = 'article/hotArticleList'
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              // console.log(res.data.data.list)
              this.hotArticleList = res.data.data.list;
            }
          })
    },
    getNewArticles(){
      let url = 'article/newArticleList'
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              this.newArticleList = res.data.data.list;
            }
          })
    },
    getHotTags(){
      let url = 'tag/getHotTags'
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              this.hotTagList = res.data.data;
            }
          })
    },
    showDetail(id, authorId) {
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: id,
          authorId: authorId
        }
      });
    },
    init(){
      this.getHotArticles();
      this.getNewArticles();
      this.getHotTags();
    }
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>

.right_bar {
  /*background: #e5e9f2;*/
  border-radius: 4px;
  min-height: 36px;
}
/*.row-bg {*/
/*  padding: 10px 0;*/
/*  background-color: #f9fafc;*/
/*}*/


.right_bar_item{
  height: 340px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid lightgray;
  margin-bottom: 20px;
  text-align: center;
}
.right_bar_item h3{
  text-align: left;
  margin-left: 20px;
}

.right_links {
  font-size: 18px;
}
.right_bar_tag{
  border-radius: 30%;
  border: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  padding: 6px;
  letter-spacing: 4px;
  margin-left: 30px;
  background-color: #5bc65b;
  color: #fff;
}
.right_bar_item_title {
  width: 94%;
  margin-left: 10px;
  border-bottom: 1px solid lightgray;
}

</style>